<template>
  <div>
    <el-dialog
      title="收货人信息"
      :visible.sync="centerDialogVisible"
      width="60%"
      center
    >
      <div class="adress-from">
        <div class="dis-flex">
          <span class="label"><em>*</em>所在地区</span>
          <div class="area_box">
            <div class="inp_area ">
              <div class="inp_area_box">
                <span class="provinceNameIpt" @click="provinceFn()">{{ provinceNameIpt }}</span>
                <span class="cityNameIpt" @click="cityFn()">{{ cityNameIpt }}</span>
                <span class="areaNameIpt">{{ areaNameIpt }}</span>
                <span class="streetNameIpt">{{ streetNameIpt }}</span>
              </div>
            </div>
            <div class="area_list show">
              <div class="tab">
                <span v-show="isprovince" class="area_p curr ">{{ provinceName }}</span>
                <span v-show="iscity" class="area_c ">{{ cityName }}</span>
                <span v-show="isarea" class="area_a ">{{ areaName }}</span>
                <span v-show="isstreet" class="area_s ">{{ streetName }}</span>
              </div>
              <!-- <a class="close" @click="closeFn">关闭</a> -->
              <ul v-show="isprovinceList" class="list">
                <li v-for="(item , index) in provinceList" :key="index" @click="provinceFn(item)">{{ item.name }}</li>
              </ul>
              <ul v-show="iscityList" class="list">
                <li v-for="(item , index) in cityList" :key="index" @click="cityFn(item)">{{ item.name }}</li>
              </ul>
              <ul v-show="isareaList" class="list">
                <li v-for="(item , index) in cityList" :key="index" @click="sareaFn(item)">{{ item.name }}</li>
              </ul>

              <ul v-show="isstreetList" class="list">
                <li v-for="(item , index) in cityList" :key="index" @click="streetFn(item)">{{ item.name }}</li>
              </ul>
            </div>
          </div>

        </div>
        <div class="dis-flex">
          <span class="label"><em>*</em>小区名称</span>
          <div>
            <el-select v-model="housingEstateId" placeholder="请选择">
              <el-option
                v-for="item in houseOptions"
                :key="item.housingEstateId"
                :label="item.name"
                :value="item.housingEstateId"
              />
            </el-select>
          </div>
        </div>
        <div class="dis-flex">
          <span class="label"><em>*</em>详细地址</span>
          <div>
            <input v-model="address" type="text" name="title" autocomplete="off" class="  order-input" placeholder="请输入详细地址">
          </div>
        </div>
        <div class=" dis-flex">
          <span class="label"><em>*</em>收货人</span>
          <div>
            <input v-model="receiveUserName" type="text" name="title" autocomplete="off" class="  order-input" placeholder="请输入收货人">
          </div>
        </div>
        <div class="dis-flex">
          <span class="label"><em>*</em>手机号码</span>
          <div>

            <input v-model="receiveUserPhone" name="title" autocomplete="off" class="  order-input" maxlength="11" placeholder="请输入手机号" @input="handleInput">
          </div>
        </div>
        <div class=" dis-flex">
          <span class="label"><em />固定电话</span>
          <div>
            <input name="title" autocomplete="off" class="  order-input" value="" placeholder="请输入固定电话">
          </div>
        </div>
        <div class=" dis-flex">
          <span class="label"><em />邮箱地址</span>
          <div>
            <input type="text" name="title" autocomplete="off" class="  order-input" value="" placeholder="请输入邮箱地址">
            <div class="tips">用来接收订单提醒邮件，便于您及时了解订单状态</div>
          </div>
        </div>
        <div class=" dis-flex">
          <span class="label lineheght"><em />地址别名</span>
          <div class=" dis-flex">
            <input type="text" name="title" autocomplete="off" class="  order-input" value="" placeholder="请输入地址别名">
            <div class="alias-box">
              <span class="tips">建议填写常用名称</span>
              <span class="border-class">家里</span>
              <span class="border-class">父母家</span>
              <span class="border-class">公司</span>
            </div>
          </div>
        </div>
        <div class="submit-btn  dis-flex" @click="addAdressFn">
          <span class="label"><em /></span>
          <div class="btn">保存收货人信息</div>
        </div>
      </div>
    </el-dialog>
  </div>

</template>
<script>
import _validate from '@/framework/commonJs/wptx_validate'

import { _getAreasByPcode, _getHousingEstateList } from '@/api/order'
export default {
  name: 'AdressDialog',
  components: {
  },

  props: {
    activeData: {
      type: Object,
      default: function() {

      }
    }

  },
  data() {
    return {
      centerDialogVisible: false,
      isprovince: true,
      iscity: false,
      isarea: false,
      isstreet: false,

      provinceNameIpt: '请选择区域', // 最终选择的值
      cityNameIpt: '',
      areaNameIpt: '',
      streetNameIpt: '',

      provinceName: '请选择',
      cityName: '请选择',
      areaName: '请选择',
      streetName: '请选择',

      isprovinceList: true,
      iscityList: false,
      isareaList: false,
      isstreetList: false,

      provinceList: [],
      cityList: [],
      areaList: [],
      streetList: [],

      houseOptions: [], // 小区名称数据
      houseName: '',

      address: '', // 详细地址
      provinceCode: '', // 提交入参省
      cityCode: '', // 提交入参市
      housingEstateId: '', // 提交入参小区
      receiveUserName: '', // 提交入参收货人
      receiveUserPhone: '', // 提交入参手机号

      iptHtmlList: []// 回显请求数据

    }
  },
  watch: {

  },
  mounted() {

  },
  methods: {
    initFn() {
      console.log('=======')

      this.centerDialogVisible = true
      this.getAdressFn()
      if (this.activeData.province) {
        this.setDataFn()
      }
    },
    handleInput(event) {
      const value = event.target.value

      if (!/^\d*$/.test(value)) { // 使用正则表达式进行校验，确保只包含数字
        this.receiveUserPhone = '' // 非数字情况下清空输入框的内容
      } else {
        this.receiveUserPhone = value // 更新输入框的值
      }
    },
    // 根据父组件传过来的值来请求需要回显的内容
    async setDataFn() {
      console.log(this.activeData, '这是父组件传过来的省市')
      const params = {
        city: this.parentCity,
        pageNum: 1,
        pageSize: 9999,
        province: this.parentProvince

      }
      const { data } = await _getHousingEstateList(params)
      this.iptHtmlList = data.records
      this.houseOptions = data.records
      this.iptHtmlList.forEach(item => {
        if (item.city == this.activeData.city && item.province == this.activeData.province) {
          this.provinceNameIpt = item.provinceName
          this.cityNameIpt = item.cityName
          this.housingEstateId = item.housingEstateId
        }
      })
      // 详细地址 收货人 电话都得从父组件传过来
      this.address = this.activeData.address
      this.receiveUserName = this.activeData.receiveUserName
      this.receiveUserPhone = this.activeData.receiveUserPhone

      console.log('回显数据', this.iptHtmlList)
    },
    // 默认获取一级地址省

    async getAdressFn() {
      const params = {
        pcode: ''
      }
      // const res = await _getAreasByPcode(params)
      const res = {
        'msg': '操作成功',
        'code': 200,
        'data': [
          {
            'code': '11',
            'name': '北京市',
            'level': 1,
            'pcode': null,
            'pinyin': null,
            'choice': false,
            'otherChoice': false,
            'cityFirstLetter': null
          },
          {
            'code': '12',
            'name': '天津市',
            'level': 1,
            'pcode': null,
            'pinyin': null,
            'choice': false,
            'otherChoice': false,
            'cityFirstLetter': null
          },
          {
            'code': '13',
            'name': '河北省',
            'level': 1,
            'pcode': null,
            'pinyin': null,
            'choice': false,
            'otherChoice': false,
            'cityFirstLetter': null
          },
          {
            'code': '65',
            'name': '新疆维吾尔自治区',
            'level': 1,
            'pcode': null,
            'pinyin': null,
            'choice': false,
            'otherChoice': false,
            'cityFirstLetter': null
          },
          {
            'code': '61',
            'name': '陕西省',
            'level': 1,
            'pcode': null,
            'pinyin': null,
            'choice': false,
            'otherChoice': false,
            'cityFirstLetter': null
          }
        ]
      }

      this.provinceList = res.data
    },
    // 点击选择省
    provinceFn(item) {
      if (item) {
        this.provinceName = item.name
        this.provinceCode = item.code
      }

      this.iscity = true

      // 根据省code 调取市
      const params = {
        pcode: item ? item.code : this.provinceCode
      }
      // const res = await _getAreasByPcode(params)
      const res = {
        'msg': '操作成功',
        'code': 200,
        'data': [
          {
            'code': '610100000000',
            'name': '西安市',
            'level': 2,
            'pcode': '61',
            'pinyin': null,
            'choice': false,
            'otherChoice': false,
            'cityFirstLetter': null
          },
          {
            'code': '610200000000',
            'name': '铜川市',
            'level': 2,
            'pcode': '61',
            'pinyin': null,
            'choice': false,
            'otherChoice': false,
            'cityFirstLetter': null
          },
          {
            'code': '610300000000',
            'name': '宝鸡市',
            'level': 2,
            'pcode': '61',
            'pinyin': null,
            'choice': false,
            'otherChoice': false,
            'cityFirstLetter': null
          },
          {
            'code': '610400000000',
            'name': '咸阳市',
            'level': 2,
            'pcode': '61',
            'pinyin': null,
            'choice': false,
            'otherChoice': false,
            'cityFirstLetter': null
          },
          {
            'code': '610500000000',
            'name': '渭南市',
            'level': 2,
            'pcode': '61',
            'pinyin': null,
            'choice': false,
            'otherChoice': false,
            'cityFirstLetter': null
          },
          {
            'code': '610600000000',
            'name': '延安市',
            'level': 2,
            'pcode': '61',
            'pinyin': null,
            'choice': false,
            'otherChoice': false,
            'cityFirstLetter': null
          },
          {
            'code': '610700000000',
            'name': '汉中市',
            'level': 2,
            'pcode': '61',
            'pinyin': null,
            'choice': false,
            'otherChoice': false,
            'cityFirstLetter': null
          },
          {
            'code': '610800000000',
            'name': '榆林市',
            'level': 2,
            'pcode': '61',
            'pinyin': null,
            'choice': false,
            'otherChoice': false,
            'cityFirstLetter': null
          },
          {
            'code': '610900000000',
            'name': '安康市',
            'level': 2,
            'pcode': '61',
            'pinyin': null,
            'choice': false,
            'otherChoice': false,
            'cityFirstLetter': null
          },
          {
            'code': '611000000000',
            'name': '商洛市',
            'level': 2,
            'pcode': '61',
            'pinyin': null,
            'choice': false,
            'otherChoice': false,
            'cityFirstLetter': null
          }
        ]
      }
      this.cityList = res.data

      this.iscityList = true
      this.isprovinceList = false
    },
    // 点击选择市
    cityFn(item) {
      if (item) {
        this.cityName = item.name
        this.cityCode = item.code
      }

      // 因为接口只有省市 所以34级暂时不查 直接赋值12级
      this.provinceNameIpt = this.provinceName
      this.cityNameIpt = this.cityName

      // 根据城市调取小区数据
      const res = {
        'msg': '操作成功',
        'code': 200,
        'data': {
          'records': [
            {
              'remark': null,
              'delFlag': '0',
              'createBy': 'master',
              'createTime': '2023-12-24T22:03:31Z',
              'updateBy': 'master',
              'updateTime': '2024-01-12T03:06:42Z',
              'housingEstateId': 'efc799649871d6d1c0bf9933ad8ebc732',
              'province': '12',
              'provinceName': '天津市',
              'city': '120100000000',
              'cityName': '天津市',
              'name': '中铁尚都城',
              'totalArea': 10.200,
              'coveredArea': 5.800,
              'cellAddress': '陕西省西安市高新区巴塞罗那',
              'buildingCount': null,
              'roomCount': null,
              'storeInfoId': null
            },
            {
              'remark': null,
              'delFlag': '0',
              'createBy': 'master',
              'createTime': '2023-12-24T22:03:31Z',
              'updateBy': 'master',
              'updateTime': '2024-01-12T03:06:42Z',
              'housingEstateId': 'efc799649871d6d1c0bf9933ad8ebc73',
              'province': '12',
              'provinceName': '天津市',
              'city': '120100000000',
              'cityName': '天津市',
              'name': '御园小区',
              'totalArea': 10.200,
              'coveredArea': 5.800,
              'cellAddress': '陕西省西安市高新区巴塞罗那',
              'buildingCount': null,
              'roomCount': null,
              'storeInfoId': null
            }
          ],
          'total': 1,
          'size': 9999,
          'current': 1,
          'pages': 1
        }
      }
      this.houseOptions = res.data.records

      // 根据市code 调取区
      // const params = {
      //   pcode: item ? item.code : this.cityCode,
      //   timestamp: 1707189652
      // }
      //  const res = await _getAreasByPcode(params)
      // const res = {

    // }
    },
    //

    // 新增地址
    addAdressFn() {
      const params = {
        province: this.provinceCode,
        city: this.cityCode,
        housingEstateId: this.housingEstateId,
        isDefault: 0,
        address: this.address,
        receiveUserName: this.receiveUserName,
        receiveUserPhone: this.receiveUserPhone
      }
      console.log(params)
    }
  }
}
</script>
<style scoped lang="scss">
.adress-from{
    input{
      font-size: 12px;
    }
    .dis-flex{
        display: flex;

        line-height: 36px;
        margin: 10px 0;

        input{
            border: none;
            width: 450px;
            border: 1px solid #d3d3d3;
            line-height: 36px;
            height: 36px;
            text-indent: 10px;
            border-radius: 5px;
        }
        input:focus{
            outline: none;
        }
        .tips{
            color: #999;
        }
        .alias-box{
            display: flex;
            height: 36px;
            line-height: 34px;
            margin-left: 8px;
            .border-class{
                border: 1px solid #ccc;
                border-radius: 1px;
                padding: 2px 10px;
                margin: 0 2px;
                cursor: pointer;
                border-radius: 5px;
            }
            .border-class:hover{
                color: #e4393c;
                border: 1px solid #e4393c;
            }

        }

        .area_list{
              display: none;
            }
            .area_box:hover{
              .area_list{
                display: block;
              }
            }
      .label {
        width: 95px;
        text-align: left;
        em {
        color: #e4393c;
        margin: 0 5px;
        }
        }
        .label.lineheght{
            line-height: 50px;
        }
        .area_box{
          position: relative;
          .inp_area {
            width: 450px;
            border: 1px solid #d3d3d3;
            border-radius: 5px;
            span{
              font-size: 12px;
              margin-left: 10px;
            }
            .provinceName{
                margin-left: 5px;
            }
        }
      .area_list {
        position: absolute;
        top: 30px;
        left: 0;
        border: 1px solid #d3d3d3;
        background: #fff;
        width: 100%;
        z-index: 99999;
        .tab{
          width: 100%;
          margin: 0 auto;
          border-bottom: 1px solid #FF8000;
          padding-top: 6px!important;
          padding-left: 10px;
          span{
            cursor: pointer;
            float: left;
            height: 24px;
            line-height: 24px;
            margin: 0 4px -1px 0;
            border: 1px solid #d3d3d3;
            border-bottom-color: #FF8000;
            padding: 1px 5px 0;

          }
          }
          .close {
          position: absolute;
          width: 22px;
          height: 22px;
          top: 5px;
          right: 10px;
          display: inline-block;
          font-size: 0;
          background:url(../../assets/image/close.png) no-repeat 0 0; ;
          overflow: hidden;
          cursor: pointer;
          }
          .list {
          border-top: none!important;
          clear: both;
          padding: 10px 0 5px 2px!important;
          background-color: #ffffff;
          width: 100%;
          margin: 0;
          li{
            float: left;
            margin-left: 18px;
            line-height: 24px;
            color: #0b5da2;
            width: 60px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            }
          }
          }
        }
    }
        }

    .submit-btn {
        margin-bottom: 10px;
        line-height: 25px;
        .btn{
            color:#fff;
            background: #e4393c;
            padding: 2px 8px;
            cursor: pointer;
        }
    }

>>>.el-dialog__header{
    background: #f3f3f3;
    font-size: 14px;
    color: #666;
}
>>>.el-select{
 width: 450px;
}
>>>.el-input__inner{
  font-size: 12px;
}
</style>
